<template>
  <section class="todoapp">
    <todu-header @add="handadd"></todu-header>
    <tode-main :list="list2" @del="handlDel" @state="handleState" @changeAllState="handAll"></tode-main>
    <todu-footer :flag="flag" :list="list" @clearr="handClear"  @changeFlag="val => { flag = val}"></todu-footer>
  </section>
</template>

<script>
import TodeMain from './components/TodeMain.vue'
import ToduFooter from './components/ToduFooter.vue'
import ToduHeader from './components/ToduHeader.vue'
export default {
  components: { ToduHeader,ToduFooter, TodeMain},
  data(){
    return {
      // l
      list:JSON.parse(localStorage.getItem('todo-list')) || [],
      flag:1
    }
  },
  methods:{
    handlDel(id) {
      this.list = this.list.filter(item => {
        return item.id !== id
      })
    },
    handadd(todo) {
      this.list.unshift({
        id: +new Date(),
        name: todo, 
        isDone: false
      })
    },
    handleState (id) {
      const row = this.list.find(item=>{
        return item.id===id
      })
      row.isDone = !row.isDone
    },
    handClear() {
      this.list = this.list.filter(item => item.isDone === false)
    },
    handAll(val) {
      this.list.forEach(item => {
        item.isDone = val
      })
    }
  },
   computed : {
    list2(){
      if(this.flag === 2){
        return this.list.filter(item => item.isDone=== false)
      }else if (this.flag ===3){
        return this.list.filter(item => item.isDone === true)
      }else {
        return this.list
      }
    }
   },
   watch : {
    list : {
      handler(val) {
        localStorage.setItem('todo-list',JSON.stringify(val))
      },
      deep:true
    }
   }
  }
</script>

    
    
<style></style>
